<template>
  <div class="destination">
    <div class="header-layout flex flex-col justify-end items-center">
      <van-image :src="require('@/assets/img/firstaid.jpg')" />
    </div>
    <div class="main-layout flex">
      <!-- 选项卡 -->
      <div class="tab-layout">
        <ul class="tab">
          <li class="tab-item" v-for="(item, index) in list" :key="index" :class="{ 'tab-item-active': index === activeIndex }" @click="checkedCate(index)">
            <img :src="item.picUrl" alt="" height="30" width="30" style="margin: 10px 10px 0 10px" />
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
      <!-- 内容 -->
      <div class="content-layout" ref="container">
        <template v-if="childList.length > 0">
          <ul class="content flex flex-row flex-wrap">
            <li class="content-item" v-for="(item, index) in childList" :key="index" @click="firstAidDetail(item)">
              <div class="content-cover">
                <span class="content-title">{{ item.name }}</span>
              </div>
            </li>
          </ul>
        </template>
        <van-empty v-else description="暂无数据" />
      </div>
      <!-- 返回顶部 -->
      <back-top selector=".content-layout"></back-top>
      <Loading :isShow="loading"></Loading>
    </div>
    <!-- 标签栏 -->
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '@/components/Tabbar';
import Loading from '@/components/Loading';
import BackTop from '@/components/BackTop';
import mixin from '@/mixin/index';
import { listFirstAidType, listFirstAidPage } from '../../api/firstaid';

export default {
  name: 'firstaid',
  components: {
    Tabbar,
    BackTop,
    Loading,
  },
  mixins: [mixin],
  data() {
    return {
      loading: true,
      list: [],
      childList: [],
      activeIndex: 0,
      pageNo: 1,
      pageSize: 20,
      isCompleted: false,
      typeId: 0,
    }
  },
  beforeMount() {
    this.getData();
  },
  mounted() {
    this.bindScroll('container', () => {
      if (!this.isCompleted) {
        this.pageNo += 1;
        this.pageFirstAid();
      }
    });
  },
  methods: {
    async getData() {
      try {
        this.loading = true;
        const { code, message, data } = await listFirstAidType();
        if (code == 200) {
          if (data.length !== 0) {
            this.list = data;
            this.typeId = this.list[0].id;
            this.pageFirstAid()
          }
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
					this.loading = false;
				});
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    checkedCate(index) {
      this.activeIndex = index;
      this.typeId = this.list[index].id;
      this.pageNo = 1;
      this.childList = [];
      this.isCompleted = false;
      this.pageFirstAid();
    },

    async pageFirstAid(clear = false) {
      try {
        this.loading = true;
        const { code, message, data } = await listFirstAidPage({
          "typeId": this.typeId,
          "page": this.pageNo,
          "size": this.pageSize
        });
        if (code == 200) {
          if (data.list.length !== 0) {
            if (clear) {
              this.childList = [];
            }
            this.childList.push(...data.list);
          } else {
            this.isCompleted = true;
          }
        } else {
          this.$toast(message);
        }
        this.$nextTick(() => {
					this.loading = false;
				});
      } catch (error) {
        console.log(error);
        this.loading = false;
      }
    },

    firstAidDetail(item){
      this.$router.push({
        path:'/firstAidDetail',
        query:{
          id: item.id
        }
      })
    }

  },
}
</script>

<style lang="scss" scoped>
.header-layout {
  display: flex;
  width: 100%;
  height: 100px;
  background-size: cover;
  justify-content: center;
  align-items: center;
}
.main-layout {
  display: flex;
  position: absolute;
  top: 140px;
  right: 0;
  left: 0;
  bottom: 50px;
  background-color: aliceblue;
  .tab-layout {
    overflow-y: auto;
    width: 125px;
    background-color: #fafafa;
    .tab {
      .tab-item {
        display: flex;
        height: 50px;
        background-color: #fafafa;
        color: #333;
        font-size: 14px;
        text-align: left;
        line-height: 50px;
        &.tab-item-active {
          background-color: #fff;
          border-left: 2px solid;
          color: #bf2a2f;
          font-weight: bold;
        }
      }
    }
  }
  .content-layout {
    flex: 1;
    overflow-y: auto;
    .content {
      padding: 10px 10px 0 0;
      .content-cover {
        width: 100%;
        height: 45px;
        border-radius: 5px;
        border-style: groove;
      }
      .content-item {
        padding: 0 0 15px 10px;
        position: relative;
        .content-title {
          position: absolute;
          top: 0;
          left: 20px;
          right: 0;
          bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>